<template>
  <section class="tools-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        AES加解密
      </div>
      <div class="text item">
        <p v-for="(item, index) in list" :key="index">
          <span>name：{{ item.value }}</span>
          <span>{{ item.mapping }} : mapping</span>
        </p>
      </div>
      <el-button class="mg-t12" type="success" @click="convertCoding">加/解密</el-button>
    </el-card>
  </section>
</template>
<script>
import CryptoJS from 'crypto-js'
const key = CryptoJS.enc.Utf8.parse('0123456789abcdef')
export default {
  data () {
    return {
      list: [
        {
          type: 0,
          value: 'qwqlxnzowGez9aZmi2/tVg=='
        }, {
          type: 1,
          value: '陈小飞'
        }, {
          type: 1,
          value: '赵四方'
        }, {
          type: 1,
          value: '谢秀燕'
        }
      ]
    }
  },
  methods: {
    convertCoding () {
      this.list.map((v, i) => {
        if (v.type) {
          this.$set(this.list, i, { ...v, mapping: this.Encrypt(v.value) })
        }
        else {
          this.$set(this.list, i, { ...v, mapping: this.Decrypt(v.value) })
        }
      })
    },
    //解密方法
    Decrypt(word) {
      const decrypt = CryptoJS.AES.decrypt(word, key, { mode:CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
      return CryptoJS.enc.Utf8.stringify(decrypt).toString()
    },    
    //加密方法
    Encrypt(word) {
      let srcs = CryptoJS.enc.Utf8.parse(word)
      let encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
      return encrypted.toString()
    }
  }
}
</script>
<style lang="less" scoped>
p {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
}
</style>
